<template>
  <div>
    <modal-view ref="modalViewRef1" title="密码修改" width="40%" :before-submit="beforeSubmit" @close="close">
      <el-form ref="formRef" label-width="80px" :model="formData" :rules="rules" label-position="left">
        <el-form-item v-if="formData.Name" label="账号名称" prop="Name">
          <el-input v-model="formData.Name" :disabled="true"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="手机号" prop="Phone">
          <el-input v-model="formData.Phone" :disabled="true"></el-input>
        </el-form-item> -->
        <el-form-item label="新密码" prop="NewPsw">
          <el-input v-model="formData.NewPsw"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="NewPsw2">
          <el-input v-model="formData.NewPsw2"></el-input>
        </el-form-item>
      </el-form>
    </modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "passwordModal",
})
</script>

<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import { ElMessage } from "element-plus";
import ModalView from "@/components/ModalView";
import { request } from "@/utils/axios";
import { toPara } from "@/utils/base";

let emit = defineEmits<{
  (e: "close"): void;
  (e: "submit"): void
}>()

/**
 * 弹框
 */
let modalViewRef1 = ref();

/**
 * 表单
 */
let formRef = ref();


class FormDataClass {

  Id: number = 0;

  UnionGuid: string = "";

  Name: string = "";

  /**
   * 新密码
   */
  NewPsw: string = "";

  /**
   * 再输一次
   */
  NewPsw2: string = ""

  /**
   * 类型
   * 1: 修改自己的
   * 2：修改别人的
   */
  ModifyType: number = 0;

  constructor(para: any) {
    toPara(this, para);
  }
}

/**
 * 表单
 */
let formData = ref<FormDataClass>(new FormDataClass({}));


/**
 * 获取到的子表区域
 */
let checkedKeys = ref<any>()
/**
 * 表单验证
 */
let validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入新密码'))
  } else {
    if (formData.value.NewPsw2 !== '') {
      if (!formRef.value) return
      formRef.value.validateField('IsNewPsw', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码！'))
  } else if (value !== formData.value.NewPsw) {
    callback(new Error("两次输入密码不一致!"))
  } else {
    callback()
  }
}
let rules = reactive({
  NewPsw: [{ validator: validatePass, trigger: 'blur' }],
  NewPsw2: [{ validator: validatePass2, trigger: 'blur' }],
  // Name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
  // Phone: [
  //   { required: true, message: "请输入手机号", trigger: "blur" },
  //   {
  //     pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
  //     message: "手机号格式错误",
  //     trigger: "blur"
  //   },
  // ],
})

/**
 * 页面展示
 */
function show(data: any, modifyType: number) {
  formData.value = new FormDataClass(data);
  formData.value.ModifyType = modifyType;
  /**
   * 打开页面
   */
  modalViewRef1.value.show();
}

/**
 *  保存前校验
 * http://localhost:39086/MgrUser/ModifyPsw
 */
function beforeSubmit(): Promise<void> {
  return new Promise((resolve, reject) => {
    formRef.value.validate()
      .then(() => {
        if (formData.value.ModifyType == 1) {
          //修改自己的
          request("/MgrUser/ModifyPsw", formData.value).then(res => {
            ElMessage.success("保存成功");
            emit("submit");
            resolve()
          }).catch(reject)
        } else if (formData.value.ModifyType == 2) {
          //修改别人的
          request("/MgrUser/ResetPsw", formData.value).then(res => {
            ElMessage.success("保存成功");
            emit("submit");
            resolve()
          }).catch(reject)
        }
      })
      .catch(reject)
  })
}

/**
 * 关闭页面
 */
function close() {
  emit("close")
}

/**
 * 导出
 */
defineExpose({
  show
})
/**
 * ====================
 *  页面初始化
 * ====================
 */

</script>

<style lang="less" scoped></style>

